<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs [items]="['实施管理', '实施人员管理']" icon="fa fa-wrench"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>实施人员管理</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">用户类型</span>
                  <select name="" class="top_module_select" [(ngModel)]="userType" (change)="table_search()">
                    <option value="">全部</option>
                    <option *ngFor="let item of userTypeList" [value]="item.id">{{ item.text }}</option>
                  </select>
                </div>
                <div class="top_module">
                  <span class="module_text">实施团队</span>
                  <sa-company-tree companyTreeId="companyTree" [inputApi]="inputApi" inputName="outsourcingTeamName"
                    [root]="isShowRoot" [inputName]="'outsourcingTeamName'" [companyNameValue]="outsourcingTeamName"
                    [companyIdValue]="outsourcingTeamId"
                    (companySelected)="companyTeamSelected($event)"></sa-company-tree>
                </div>
                <div class="top_module">
                  <span class="top_module_label module_text">员工类型</span>
                  <select name="" class="top_module_select" [(ngModel)]="workerType">
                    <option value="">全部</option>
                    <option value="0">管理者</option>
                    <option value="1">正式员工</option>
                    <option value="2">兼职员工</option>
                    <option value="3">外包员工</option>
                  </select>
                </div>
                <button class="btn btn-primary" (click)="table_search()">查询</button>
                <button type="button" class="btn btn-primary" (click)="new_user()" *ngIf="userAdd">添加</button>
                <!-- <button type="button" class="btn btn-primary" (click)="handleInstallRoyalty(installRoyaltyModal)"
                  *ngIf="installRoyalty">安装提成(正式员工)</button> -->
              </div>
              <div class="right top-search">
                <input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input"
                  placeholder="姓名、账户名称..." />
                <span class="top-search-box">
                  <button class="top-search-btn" type="button" (click)="table_search()">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                <thead>
                  <tr>
                    <th>账户名</th>
                    <th>姓名</th>
                    <th>实施团队</th>
                    <th>用户类型</th>
                    <th>所属角色</th>
                    <th>员工类型</th>
                    <th>电话号码</th>
                    <th>用户描述</th>
                    <th>单位名称</th>
                    <th>负责维修点</th>
                    <th>创建者</th>
                    <th>创建时间</th>
                    <th>在职状态</th>
                    <th>更新时间</th>
                    <th *ngIf="userEdit || userDeleteBatch || userResetPassword">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <td>{{ row.userName }}</td>
                    <td>{{ row.name }}</td>
                    <td>{{ row.outsourcingTeamName }}</td>
                    <td>{{ row.userTypeName }}</td>
                    <td>{{ row.roleName }}</td>
                    <td>
                      <span *ngIf="row.workerType == '0'">管理者</span>
                      <span *ngIf="row.workerType == '1'">正式员工</span>
                      <span *ngIf="row.workerType == '2'">兼职员工</span>
                      <span *ngIf="row.workerType == '3'">外包员工</span>
                    </td>
                    <td>{{ row.phone }}</td>
                    <td>{{ row.description }}</td>
                    <td>{{ row.companyName }}</td>
                    <td>{{ row.repairPointNames ? row.repairPointNames : '-' }}</td>
                    <td>{{ row.creatorName }}</td>
                    <td>{{ row.createTime }}</td>
                    <td>
                      <span *ngIf="row.workerState == '1'" class="green">在职</span>
                      <span *ngIf="row.workerState == '0'" class="red">离职</span>
                    </td>
                    <td>{{ row.updateTime }}</td>
                    <td *ngIf="userEdit || userDeleteBatch || userResetPassword">
                      <button type="button" (click)="updata_user(row.id)" *ngIf="userEdit">编辑</button>
                      <button type="button" (click)="del_user(row)" *ngIf="userDeleteBatch">删除</button>
                      <button type="button" (click)="reset_password(row)" *ngIf="userResetPassword">密码重置</button>
                      <button type="button" (click)="showMaintenance(carTreeModal, row.id)"
                        *ngIf="row.workerState == '1'">
                        分配维修点
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!-- 选择维修点弹框 -->
  <section bsModal #carTreeModal="bs-modal" class="modal" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeCarTreeModal(carTreeModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">选择维修点</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="op_header table-top" style="height: 37px">
              <div class="top-search search_box" style="width: 240px; margin-top: 0" id="searchCarIpt">
                <input type="text" id="searchKeyList" autocomplete="off" (change)="list_search()" class="search-input"
                  placeholder="关键字..." style="padding-left: 15px" />
                <span class="top-search-box" style="left: auto; bottom: auto">
                  <button class="top-search-btn" type="button" (click)="list_search()">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
                <div style="position: absolute; width: 250px; left: 250px; top: 5px">
                  已选中{{ selectedPointNum }}个维修点
                </div>
              </div>
            </div>
          </div>
          <div style="height: 50px; margin: 10px 0">
            <button type="button" (click)="allOpen()" class="btn btn-primary">全部展开</button>
            <button type="button" (click)="allClose()" class="btn btn-primary">全部折叠</button>
          </div>
          <!-- 维修点树 -->
          <div class="tree_box" style="margin-top: 0; height: 500px; overflow: hidden">
            <div class="col-xs-12" style="padding: 0">
              <div style="font-weight: bold; font-size: 14px; position: absolute">维修点列表</div>
              <div class="form-group tree_content" id="tree_content"
                style="height: 500px; overflow-y: auto; overflow-x: hidden">
                <div class="" style="margin-left: 100px">
                  <div id="deviceList"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="closeCarTreeModal(carTreeModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="selectSubmit(carTreeModal)">确认</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 选择维修点弹框 END-->

  <!-- 安装提成（正式员工） -->
  <div bsModal #installRoyaltyModal="bs-modal" id="installRoyaltyModal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="cancelInstallRoyalty(installRoyaltyModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">安装提成（正式员工）</h4>
        </div>
        <div class="modal-body" style="padding: 15px">
          <div class="install-royalty-header">
            <button type="button" class="btn btn-primary"
              (click)="installRoyaltyAdd(addInstallRoyaltyModal, 'new')">添加</button>
          </div>
          <!-- <div class="page-header clearfix s_table_opreation">
            <div class="right top-search">
              <button type="button" class="btn btn-primary"
                (click)="installRoyaltyAdd(addInstallRoyaltyModal, 'new')">添加</button>
            </div>
          </div> -->
          <div class="table_scroll">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
              <thead>
                <tr>
                  <th>车型用途</th>
                  <th>操作</th>
                  <th>提成方案</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let row of installRoyaltyTableData">
                  <td>{{ row.useTypeL2Name }}</td>
                  <td>
                    <button type="button"
                      (click)="editOrDetailInstallRoyalty(row, addInstallRoyaltyModal, 'update')">编辑</button>
                    <button type="button" (click)="delInstallRoyalty(row)">删除</button>
                  </td>
                  <td>

                    <button type="button"
                      (click)="editOrDetailInstallRoyalty(row, addInstallRoyaltyModal, 'detail')">方案详情</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="table-fix clearfix">
            <paginator [totalRecords]="installRoyaltytotalCount" [rows]="installRoyaltyPageSize"
              [currentPage]="installRoyaltyCurPage - 1" (onPageChange)="installRoyaltyPaginate($event)"></paginator>
            <button type="button" class="btn default refresh_btn" (click)="installRoyaltyTableRefresh()">
              <i class="fa fa-refresh"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 安装提成（正式员工） end-->

  <!-- 添加和编辑安装提成（正式员工） -->
  <section bsModal #addInstallRoyaltyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 600px" id="addInstallRoyaltyModal">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeInstallRoyalty(addInstallRoyaltyModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 *ngIf="fromType == 'new'" class="modal-title">添加安装提成方案</h4>
          <h4 *ngIf="fromType == 'update'" class="modal-title">编辑安装提成方案</h4>
          <h4 *ngIf="fromType == 'detail'" class="modal-title">安装提成方案详情</h4>
        </div>
        <div class="modal-body">
          <form name="setInstallRoyalty" id="setInstallRoyaltyFrom" class="form-horizontal" role="form"
            novalidate="novalidate" [saBootstrapValidator]="validatorOptions">
            <div class="row form-horizontal">

              <div class="form-group clearfix">
                <label class="control-label col-sm-3 no-padding-right">
                  车型用途
                  <sup>*</sup>
                </label>
                <div class="col-sm-9">
                  <div class="clearfix s_fix_select2">
                    <select class="form-control select2" id="useTypeSelect" [attr.formId]="installRoyaltyForm.id"
                      select2 name="useTypeL2" style="width: 100%" [disabled]="fromType === 'detail'">
                      <option value="">请选择</option>
                      <optgroup *ngFor="let item of carTypeList" [label]="item.label">
                        <option *ngFor="let itemChild of item.children" [value]="itemChild.id">
                          {{ itemChild.label }}
                        </option>
                      </optgroup>
                    </select>
                  </div>
                </div>
              </div>

              <div *ngIf="fromType !== 'detail'" class="form-group  clearfix" style="color: red;padding-left: 15px;">
                注：设置提成时，同一种传感器类型的数量范围不允许有交集
              </div>

              <div *ngFor="let item of installRoyaltyForm.schemesJson; let i = index" class="roualty">
                <div class="roualty-header">
                  提成{{i + 1}}
                  <div *ngIf="fromType !== 'detail'">
                    <span *ngIf="i === installRoyaltyForm.schemesJson.length - 1" class="addBtn"
                      (click)="addRoyaltyItem()">
                      <i class="fa fa-plus" aria-hidden="true"></i>
                    </span>
                    <span *ngIf="installRoyaltyForm.schemesJson.length !== 1" class="addBtn" style="margin-left: 10px;"
                      (click)="removeRoyaltyItem(i)">
                      <i class="fa fa-minus" aria-hidden="true"></i>
                    </span>
                  </div>
                </div>

                <div class="form-group  clearfix">
                  <label class="control-label col-sm-3 no-padding-right">
                    传感器类型
                    <sup>*</sup>
                  </label>
                  <div class="col-sm-9">
                    <div class="clearfix s_fix_select2">
                      <select class="form-control" name="sensorType" [value]="item.sensorType" style="width: 100%"
                        [disabled]="fromType === 'detail'"
                        (change)="formDataChange($event.target.value, i, 'sensorType')">
                        <option value="" selected>请选择</option>
                        <option *ngFor="let item of sensorTypeEm" [value]="item.value">{{item.label}}</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="form-group  clearfix">
                  <label class="control-label col-sm-3 no-padding-right">
                    传感器数量[个]
                    <sup>*</sup>
                  </label>
                  <div class="col-sm-9 sensorNum">
                    <div class="clearfix col-xs-3">
                      <input class="form-control" name="numStart" type="text" [value]='item.numStart'
                        [disabled]="fromType === 'detail'" onkeyup="value=value=value.replace(/^(0+)|[^\d]+/g,'')"
                        (change)="formDataChange($event.target.value, i , 'numStart')" />
                    </div>
                    <span class="lineation">—</span>
                    <div class="clearfix col-xs-3">
                      <input class="form-control" name="numEnd" type="text" [value]='item.numEnd'
                        [disabled]="fromType === 'detail'" onkeyup="value=value=value.replace(/^(0+)|[^\d]+/g,'')"
                        (change)="formDataChange($event.target.value, i , 'numEnd')" />
                    </div>
                  </div>
                </div>

                <div class="form-group  clearfix">
                  <label class="control-label col-sm-3 no-padding-right">
                    安装提成[元/台]
                    <sup>*</sup>
                  </label>
                  <div class="col-sm-9">
                    <div class="clearfix">
                      <input class="form-control" name="royalty" type="text" [value]='item.royalty'
                        [disabled]="fromType === 'detail'"
                        (change)="formDataChange($event.target.value, i, 'royalty')" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default"
            (click)="closeInstallRoyalty(addInstallRoyaltyModal)">取消</button>
          <button *ngIf="fromType !== 'detail'" type="button" class="btn btn-primary"
            (click)="submitInstallRoyalty(addInstallRoyaltyModal)">
            提交
          </button>
        </div>
      </div>
    </div>
  </section>
  <!-- 添加编辑安装提成（正式员工）  结束 -->
</div>